<template>
    <div>
        <div class="user-info-container" ref="userInfoContainer">
            <!-- 用户头像触发按钮 -->
            <div @click.stop="toggleUserPanel" class="avatar-trigger">
                <img :src="userImg" alt="用户头像" class="user_img">
            </div>

            <!-- 用户信息面板 -->
            <div v-show="showUserPanel" class="user-panel">
                <!-- 顶部用户信息 -->
                <div class="user-header">
                    <div class="user-header_img">
                        <img :src="userImg" alt="用户头像" style="width: 1.77vw; height: 1.77vw;">
                    </div>
                    <div>
                        <div class="userNmae">{{ userInfo.name }}</div>
                        <div class="account-item">
                            <div class="account-box">
                                <div class="account-text">
                                    帐号
                                </div>
                                <div class="account-content">
                                    {{ userInfo.account }}
                                </div>
                            </div>
                            <div style="white-space: nowrap;">
                                <img src="../../../assets/images/new_img/复制2.png" alt="" @click="copyAccount"
                                    v-show="!isCopied">
                                <img src="../../../assets/images/new_img/已复制.png" alt="" v-show="isCopied">
                            </div>
                        </div>

                    </div>
                </div>
                <!-- 数据统计 -->
                <div class="user-stats">
                    <div v-for="(stat, index) in userStats" :key="index" class="stat-item"
                        @click="handleStatistics(stat.key)">

                        <div class="stat-value">{{ stat.value }}</div>
                        <div class="stat-label">{{ stat.label }}</div>
                    </div>
                </div>

                <!-- 功能菜单 -->
                <div>
                    <div>
                        <div v-for="(item, index) in menuItems" :key="index" class="menu_item"
                            @click="handleMenuUser(item.action)" @mouseenter="handleMouseEnter(index)"
                            @mouseleave="handleMouseLeave(index)">
                            <div>
                                <img :src="getIconSrc(item, index)" alt="" :style="{
                                    width: `${item.iconSize.width}vw`,
                                    height: `${item.iconSize.height}vw`,
                                    position: 'relative',
                                    top: '4px'
                                }">
                            </div>
                            <div class="menu_item_text">{{ item.label }}</div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 粉丝弹窗 -->
            <div id="components-modal-demo-position">
                <a-modal v-model:open="modal1Visible" :centered="true" width="39.3vw" @ok="setModal1Visible(false)"
                    :footer="null" :bodyStyle="{ height: '30.3vw', }">

                    <template #title>
                        <div class="title-slot">
                            1个粉丝
                        </div>
                    </template>
                    <a-list item-layout="horizontal" :data-source="fansData" class="fans-list">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <div class="fans-box">
                                    <div class="fans-content">
                                        <div>
                                            <img :src="item.userImg" alt="" class="user-img">
                                        </div>
                                        <div>
                                            <p class="user-name">{{ item.userNme }}</p>
                                            <p class="user-num">
                                            <div>{{ item.fansNumber }}粉丝</div>
                                            <div>{{ item.interest }}关注</div>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="followWithInterest">
                                        关注TA
                                    </div>
                                </div>
                            </a-list-item>

                        </template>
                        <div class="NoMore">
                            没有更多了
                        </div>
                    </a-list>
                </a-modal>
            </div>

        </div>
    </div>
</template>

<script setup>
import { watch, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { replaceLast } from '@/utils'
import logoUrl from '@/assets/images/logo.png'
import { EllipsisOutlined, SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';

import Img_1 from '../../../assets/images/Md-img/上传.png'
import Img_2 from '../../../assets/images/Md-img/个人信息.png'
import Img_3 from '../../../assets/images/Md-img/退出账号.png'
import HoverImg_1 from '../../../assets/images/Md-img/上传hover.png'
import HoverImg_2 from '../../../assets/images/Md-img/个人信息hover.png'
import HoverImg_3 from '../../../assets/images/Md-img/退出hover.png'
import userImg from "../../../assets/images/local_img/userInfo.jpg"



const router = useRouter()
const route = useRoute()
const searchText = ref('')
const showHistory = ref(false)
const searchContainer = ref(null)

// 用户头像
const showUserPanel = ref(false);
const userInfoContainer = ref(null);

// 切换面板显示状态
const toggleUserPanel = () => {
    showUserPanel.value = !showUserPanel.value;
};

// 点击外部关闭面板
const handleClickUserOutside = (event) => {
    if (userInfoContainer.value && !userInfoContainer.value.contains(event.target)) {
        showUserPanel.value = false;
    }
};

// 添加全局点击事件监听
onMounted(() => {
    document.addEventListener('click', handleClickUserOutside);
});

// 移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickUserOutside);
});



// 用户信息数据
const userInfo = ref({
    name: '幸运的李李',
    department: '重庆项目 设计部 设计师',
    account: '0238564323002'
});

// 统计数据
// const userStats = ref([
//     { label: '作品', value: 153, key: 'works', },
//     { label: '获赞', value: 287, key: 'notifications', },
//     { label: '消息', value: 32, key: 'notifications', },
//     { label: '关注', value: 16559, key: 'following', },
//     { label: '收藏', value: 569, key: 'collections', }
// ]);

const userStats = ref([
    { label: '关注', value: 16559, key: 'following', },
    { label: '喜欢', value: 287, key: 'likes', },
    { label: '下载', value: 287, key: 'downloads', },
    { label: '粉丝', value: 287, key: 'notifications', },
]);

// 菜单项
const menuItems = ref([
    { label: '我的上传', action: 'Upload', type: 1, iconSize: { width: 1, height: 1 } },
    { label: '个人资料', action: 'person', type: 2, iconSize: { width: 1, height: 1 } },
    { label: '退出账号', action: 'logout', type: 3, iconSize: { width: 0.9, height: 0.9 } }
])

const iconEnum = ref({
    1: Img_1,
    2: Img_2,
    3: Img_3,
})
const hoverIconEnum = ref({
    1: HoverImg_1,
    2: HoverImg_2,
    3: HoverImg_3,
});
const hoverIndex = ref(-1);


const handleMenuUser = (action) => {
    // 处理菜单点击事件
    console.log('Clicked action:', action);
};

const handleMouseEnter = (index) => {
    hoverIndex.value = index;
};

const handleMouseLeave = () => {
    hoverIndex.value = -1;
};

const getIconSrc = (item, index) => {
    return index === hoverIndex.value ? hoverIconEnum.value[item.type] : iconEnum.value[item.type];
};


const fansData = [
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },
    {
        userImg: userImg,
        userNme: "千千阙歌",
        fansNumber: 10,
        interest: 20,
    },

];



// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = () => {
    const account = userInfo.value.account;

    // 创建一个临时的输入框
    const tempInput = document.createElement('input');
    tempInput.value = account;
    document.body.appendChild(tempInput);

    // 选中文本并执行复制
    tempInput.select();
    document.execCommand('copy');

    // 删除临时输入框
    document.body.removeChild(tempInput);

    // 显示复制成功提示
    isCopied.value = true;

    // 3秒后隐藏提示
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};


const modal1Visible = ref(false);



const handleStatistics = (key) => {
    console.log(key);
    if (key == "notifications") {
        modal1Visible.value = true;
    } else {
        router.push({
            path: '/IndividualCenter/' + key
        })
    }
}



// 菜单点击处理
// const handleMenuUser = (action) => {
//     console.log(action);
//     if (action == 'Upload') {
//         router.push({
//             path: '/IndividualCenter/' + action
//         })
//     }

//     // console.log('执行操作:', action);
//     // if (action === 'logout') {
//     //     // 退出登录逻辑
//     //     showUserPanel.value = false;
//     // }
// };
</script>

<style lang="less" scoped>
/* 用户头部信息 */
.user_img {
    width: 1.77vw;
    height: 1.77vw;
    margin-left: 1vw;
    border-radius: 50%;
}


/* 触发按钮样式 */
.avatar-trigger {
    cursor: pointer;
    display: inline-block;
}



.user-info-container {
    position: relative;
    display: inline-block;
}

/* 触发按钮样式 */
.avatar-trigger {
    cursor: pointer;
    display: inline-block;
}



.user-info-container {
    position: relative;
    display: inline-block;
}

/* 触发按钮样式 */
.avatar-trigger {
    cursor: pointer;
    display: inline-block;
}



/* 用户面板 */

.user-panel {
    width: 18.7vw;
    height: 15.6vw;
    position: absolute;
    top: 80px;
    right: 0;
    background: #fff;
    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 20px 30px;


}


.user-header {
    padding: 0px 30px;
    display: flex;
    align-items: center;
    color: rgb(51, 51, 51);



    .user-header_img {
        margin-right: 30px;


        >img {
            width: 35px;
            height: 35px;
            border-radius: 50px;
        }
    }

    .userNmae {
        width: auto;
        height: auto;
        color: rgb(51, 51, 51);
        font-size: 0.93vw;
        text-align: left;
        white-space: nowrap;
    }

    .account-item {
        width: auto;
        display: flex;
      
        margin-top: 10px;
        font-size: 0.72vw;
      

        .account-box {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            height: auto;
            word-break: break-all;

            margin-right: 8px;
          
            .account-text {
           
                letter-spacing: 4px;
                // border: 1px solid red;
                white-space: nowrap;
            }
        }


    }

    .account-item img {
        width: 0.625vw;
        height: 0.625vw;
    }

    // .userLine {
    //     height: 14px;
    //     width: 1px;
    //     margin: 0px 8px;
    //     border: 1px solid rgb(51, 51, 51);
    //     align-self: flex-end;
    // }

    // .userIntro {
    //     width: auto;
    //     height: 14px;
    //     line-height: 14px;
    //     font-size: 0.72vw;
    //     white-space: nowrap;
    //     align-self: flex-end;

    // }

    // .number {
    //     width: auto;
    //     border: 1px solid red;
    //     font-size: 0.72vw;
    //     color: #666666;
    //     margin-top: 10vw;
    // }




}


/* 统计数据 */
.user-stats {

    display: flex;
    justify-content: space-around;
    padding: 1vw 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
    color: var(--color-text);

    .stat-item {
        text-align: center;
    }

    .stat-item .stat-value {
        font-size: 0.93vw;
        color: #333333;
    }

    .stat-item .stat-label {
        font-size: 0.72vw;
        color: #666666;
        margin-top: 5px;
    }

    .stat-item:hover .stat-value,
    .stat-item:hover .stat-label {
        color: #a11f24;
    }


}

.menu_item {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    padding: 10px 0px;
    // border: 1px solid red;


}

.menu_item_text {
    margin-left: 20px;
    font-size: 0.83vw;
    color: var(--color-text-3);

    &:hover {
        color: var(--color-Sel);
    }
}

.fans-list {
    height: 28vw;
    overflow-y: auto;
    border-radius: 8px;

    .fans-box {
        width: 95%;
        margin: 0 auto;
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .fans-content {
            display: flex;

            gap: 20px;

            .user-img {
                width: 2.6vw;
                height: 2.6vw;
                border-radius: 50px;
            }

            .user-name {
                font-size: var(--text-18);
                color: var(--color-text-3);
            }

            .user-num {
                display: flex;
                gap: 6px;
                font-size: var(--text-14);
                color: var(--color-text-6);
            }
        }

        .followWithInterest {
            width: 5.2vw;
            height: 1.71vw;
            border-radius: 10px;
            text-align: center;
            line-height: 1.71vw;
            background-color: #b6080f;
            font-size: var(--text-14);
            color: var(--text-fff);
        }

    }

    .NoMore {
        text-align: center;
        margin-top: 10px 0px;
        font-size: var(--text-14);
        color: var(--color-text);
    }
}


.title-slot {
    text-align: center;
    width: 100%;
    color: var(--color-text-3);
    font-size: var(--text-22);
}
</style>